<template>
	<view class="common">
		<view class="common-header">
			<image :src="commonBg" class="commonBg"></image>
			<view class="iconfont  icon-guanzhu2" @click="follow(index)">
				<text>收藏</text>
			</view>
		</view>
		
		<view class="commonMain">
			<!-- 文章标题 -->
			<view class="commonTitle">{{commonTitle}}</view>

			<!-- 文章信息  -->
			<view class="commonInfo">
				<view class="commonLeft" @click="mine">
					<image :src="commonTop" ></image>
					<view class="commonTxt">
						<view class="commonName">{{commonName}}</view>
						<view class="commonDate">{{commonDate}}</view>
					</view>
				</view>
				<view class="commonRight">
					<view class="iconfont" :class="good"><text>{{iconGood}}</text></view>
					<view class="iconfont" :class="discuss"><text>{{iconDiscuss}}</text></view>
				</view>
			</view>
			
			<!-- 正文 -->
			<view class="commonWarp">{{commonWarp}}</view>
			
			<!-- 底部评论区 -->
			<view class="commonFooter">
				<input type="text"  hold-keyboard="true" placeholder="请输入您的回复" placeholder-class="formIpt" confirm-type="done">
				<view class="iconfont iconSize" :class="goods"></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commonBg:'https://p1-q.mafengwo.net/s15/M00/57/A9/CoUBGV3rBNSAQFusAAXNX6_foZM495.jpg',
				commonTitle:'西北·青海甘肃|真实的武侠世界 |一半费用走西北青甘大环线（不包车不自驾的小众游）',
				commonTop:'https://p1-q.mafengwo.net/s15/M00/57/C4/CoUBGV3rBOOAHXy0AAOikjkKQDk752.jpg',
				commonName:'爱生活的小美女',
				commonDate:'2020年7月12日',
				good:'icon-zan1',
				goods:'icon-zan',
				iconGood:'124',
				discuss:'icon-pinglun',
				iconDiscuss:'50',
				commonWarp:'岁月一如既往地踱步走着,从小生活在都市的我们，看惯了城市里的灯红酒绿、高楼大厦，总想着逃离城市的喧嚣，追寻内心的平静。那么趁着年轻，读万卷书不如行万里路，我们看过了 阳春 白雪的 东北 ，见识了风景秀美的 江南 、体验了椰风海韵的 海南 。这一次，我们将向着祖国 西北 的荒漠进发，去感受大 西北 的壮美与温情。岁月一如既往地踱步走着,从小生活在都市的我们，看惯了城市里的灯红酒绿、高楼大厦，总想着逃离城市的喧嚣，追寻内心的平静。那么趁着年轻，读万卷书不如行万里路，我们看过了 阳春 白雪的 东北 ，见识了风景秀美的 江南 、体验了椰风海韵的 海南 。这一次，我们将向着祖国 西北 的荒漠进发，去感受大 西北 的壮美与温情。岁月一如既往地踱步走着,从小生活在都市的我们，看惯了城市里的灯红酒绿、高楼大厦，总想着逃离城市的喧嚣，追寻内心的平静。那么趁着年轻，读万卷书不如行万里路，我们看过了 阳春 白雪的 东北 ，见识了风景秀美的 江南 、体验了椰风海韵的 海南 。这一次，我们将向着祖国 西北 的荒漠进发，去感受大 西北 的壮美与温情。岁月一如既往地踱步走着,从小生活在都市的我们，看惯了城市里的灯红酒绿、高楼大厦，总想着逃离城市的喧嚣，追寻内心的平静。那么趁着年轻，读万卷书不如行万里路，我们看过了 阳春 白雪的 东北 ，见识了风景秀美的 江南 、体验了椰风海韵的 海南 。这一次，我们将向着祖国 西北 的荒漠进发，去感受大 西北 的壮美与温情。岁月一如既往地踱步走着,从小生活在都市的我们，看惯了城市里的灯红酒绿、高楼大厦，总想着逃离城市的喧嚣，追寻内心的平静。那么趁着年轻，读万卷书不如行万里路，我们看过了 阳春 白雪的 东北 ，见识了风景秀美的 江南 、体验了椰风海韵的 海南 。这一次，我们将向着祖国 西北 的荒漠进发，去感受大 西北 的壮美与温情。岁月一如既往地踱步走着,从小生活在都市的我们，看惯了城市里的灯红酒绿、高楼大厦，总想着逃离城市的喧嚣，追寻内心的平静。那么趁着年轻，读万卷书不如行万里路，我们看过了 阳春 白雪的 东北 ，见识了风景秀美的 江南 、体验了椰风海韵的 海南 。这一次，我们将向着祖国 西北 的荒漠进发，去感受大 西北 的壮美与温情。',
			}
		},
		methods: {
			/* 点击头像跳转个人主页 */
			 mine(e){
				console.log(e)
				uni.navigateTo({
					url:"/pages/personal/index",
					// url:"../component/classdetails/classdetails?newsid="+  newsid,
					//success:res =>{},
				   // fail:() =>{},
					//complete:() => {}
				});
			},
			/* 动态标题 */
			onReady: function() {
						 uni.setNavigationBarTitle({
						 	title: '西北·青海甘肃|真实的武侠世界 |一半费用走西北青甘大环线（不包车不自驾的小众游）'
						 }),
			   console.log("页面首次渲染完毕时执行");
			 }
		},
		/* 分享给好友 */
		onShareAppMessage: function(e) {
			let title = '发送给朋友'
			return {
				title: title,
				path: 'pages/common/index'
			}
		},
		/* 点击关注 */
		
		
	}
</script>

<style lang="scss">
@import "../../icon/iconfont.css";	
.common{
	position: relative;
	.common-header{
		position: relative;
		.commonBg{
			width: 100%;
		}
		.iconfont{
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			font-size: 48rpx;
			color: $uni-bg-color-orange;
			text-align: center;
			text{
				font-size: $uni-font-size-six;
				height: 52rpx;
				vertical-align: top;
				display: inline-block;
				line-height: 52rpx;
				padding-top: 4rpx;
			}
		}
	}
	.commonMain{
		background-color: $uni-bg-color;
		padding: 20rpx 20rpx 100rpx;
		.commonTitle{
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			font-size: $uni-font-size-thirty;
			letter-spacing: $uni-spacing-row-dm;
			font-weight: 700;
		}
		.commonInfo{
			display: flex;
			padding: 30rpx 0;
			border-bottom: 2rpx solid $uni-bg-color-grey;
			.commonLeft{
				flex: 7;
				image{
					border-radius: 100%;
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					left: 20rpx;
				}
				.commonTxt{
					margin-left: 110rpx;
					letter-spacing: $uni-spacing-row-xm;
					.commonName{
						font-size:$uni-font-size-rty;
						color: $uni-text-color;
						padding-top:10rpx;
					}
					.commonDate{
						font-size:$uni-font-size-six;
						color: $uni-text-color-placeholder;
					}
				}
			}
			.commonRight{
				flex: 4;
				text-align: right;
				.iconfont{
					display: inline-block;
					vertical-align: top;
					line-height: 90rpx;
					color: $uni-text-color-placeholder;
					margin-left: 40rpx;
					text {
					  font-size: $uni-font-size-sm;
					  padding-left: 4rpx;
					  display: inline-block;
					}
				}
			}
		}
		.commonWarp{
			font-size: $uni-font-size-rty;
			letter-spacing: $uni-spacing-row-fm;
			color:$uni-text-color;
			line-height: 40rpx;
			padding: 30rpx 0;
			imgage{
				width: 100%;
			}
		}
		.commonFooter{
			display: flex;
			position: fixed;
			background: $uni-bg-color;
			border-top: 2rpx solid $uni-border-color;
			bottom: 0;
			left: 0;
			z-index: 1;
			width: 96%;
			padding: 2%;
			input{
				flex: 7;
				background-color: #f5f7fa;
				border-radius: $uni-border-radius-lg;
				height: 60rpx;
				padding: 0 3%;
			}
			.formIpt{
				font-size: $uni-font-size-sm;
				letter-spacing: $uni-spacing-row-fm;
			}
			.iconSize{
				flex: 1;
				font-size: $uni-img-size-sm;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
}
</style>
